<div class="infoBlock infoBlockM">
<div class="infoBlockHeading"><span class="t">{$SETTINGS.bs_company}</span></div>
<div class="infoBlockContent">

{literal}
<style type="text/css">
.gimaged {
	display: table-cell;
	width: 540px;
	height: 480px;
	margin: 10px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.gimaged:hover {
}
.gimagep, .gimagen {
	display: table-cell;
	width: 50px;
	cursor: pointer;
}
.gimagep a, .gimagen a {
	font-size: 72px;
	text-decoration: none;
	color: #069;
	visibility: hidden;
}
.gimagep a:hover, .gimagen a:hover {
	font-size: 80px;
}
.gimagep:hover a, .gimagen:hover a {
	visibility: visible;
}
.gimgp, .gimgn {
	width: 20px;
	height: 100px;
	line-height: 100px;
	cursor: pointer;
}
.gimgp {
	float: left;
}
.gimgn {
	float: right;
}
.gimgp a, .gimgn a {
	font-size: 36px;
	text-decoration: none;
	color: #069;
}
.gimgp a:hover, .gimgn a:hover {
	font-size: 48px;
}
div.gimgs {
	float: left;
	display: block;
	margin-top: 20px;
	padding-top: 0px;
	list-style: none;
	width: 620px;
	height: 100px;
	text-align: center;
	vertical-align: bottom;
	overflow: hidden;
}
div.gimgs td {
	width: 100px;
}
div.gimgs div.item {
	display: block;
	width: 100px;
	padding: 5px;
}
div.gimgs div.item img {
	padding: 2px;
	margin: 2px;
	border: 1px solid #FFFFFF;
}
div.gimgs .item-current {
	background-color: #c1ba6a;
}
div.gimgs .item-current img {
}
div.gimgs .item-selected {
}
div.gimgs .item-selected img {
}
div.gimgs .item-over {
	background-color: #a67453;
}
div.gimgs .item-over img {
	border: 1px solid #DADADA;
}
div.gnav {
	padding-right: 20px;
}
div.gnav a {
	margin: 4px;
}
</style>
{/literal}

{*
{literal}
<!--[if IE]>
<style type="text/css">
div.gimaged {
	line-height: 480px;
}
</style>
<![endif]-->
{/literal}
*}

{literal}
<script type="text/javascript" language="javascript">
var image_select = function(){};
var image_over = function(){};
var image_out = function(){};
</script>
{/literal}

<div class="infoBlockItem">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="gimagep" align="right" onclick="image_previous()"><a href="javascript:void(0);" title="Previous">&lsaquo;</a></td>
    <td class="gimaged" id="gimaged" onclick="image_next()">
<a href="javascript:void(0);">
{if $CONTENT.item.id > 0}
{pp_pimage src=$CONTENT.item.value eid=$CONTENT.item.id url=$CONTEXT.URLBASE path_prefix="===CONFIG_DIR_UPLOADS_RESIZED" id="gimage"}
{else}
{pp_pimage src="blank.jpg" eid=$CONTENT.item.id url=$CONTEXT.URLBASE path_prefix="images/" id="gimage"}
{/if}
</a>
    </td>
    <td class="gimagen" align="left" onclick="image_next()"><a href="javascript:void(0);" title="Next">&rsaquo;</a></td>
  </tr>
</table>
</div>

<div class="infoBlockItem">
<div class="gimgp" onclick="img_previous()"><a href="javascript:void(0);" title="Previous">&lsaquo;</a></div>
<div class="gimgn" onclick="img_next()"><a href="javascript:void(0);" title="Next">&rsaquo;</a></div>
<div class="gimgs" id="glist">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
{section name=item loop=$CONTENT.items}
    <td>
<div class="item {if $CONTENT.item.id == $CONTENT.items[item].id}item-selected{/if}" id="gitem_{$CONTENT.items[item].id}" kid="{$smarty.section.item.index+1}" onmouseover="image_over(this)" onmouseout="image_out(this)">
<div class="gimg"><a href="{$CONTEXT.URL}gallery/{$CONTENT.items[item].id}{$CONTEXT.URL_SUFFIX}" onclick="image_select('{$CONTENT.items[item].id}');return false;">{pp_pimage src=$CONTENT.items[item].value eid=$CONTENT.items[item].id url=$CONTEXT.URLBASE path_prefix="===CONFIG_DIR_UPLOADS_THUMBS" width=$CONTENT.items[item].width height=$CONTENT.items[item].height lw="90" lh="60"}</a></div>
<div class="name hidden"></div>
<div class="desc hidden"></div>
</div>
    </td>
{/section}
  </tr>
</table>
</div>
<div class="clear"></div>
<div style="padding: 20px;">
<div class="right" id="gtxt"></div>
<div class="right gnav" id="gnav"></div>
<div class="left">autoplay: <select id="gimg_auto"><option value="1">Yes</option><option value="0">No</option></select></div>
</div>
</div>

</div>
</div>

<script type="text/javascript" language="javascript">
var slider_ct = null;
var slider_c = {if $CONTENT.item.id > 0}{$CONTENT.item.id}{else}0{/if};
var slider = null;
//
var slider_status = 0;
//
{literal}
function image_select(eid){
	if( slider_status == 0 ) return;
	document.location.hash = eid;
	slider.click(eid);
	if( slider_c > 0 && slider_ct ){
		dremoveClass(slider_ct, "item-current");
	}
	slider_c = eid;
	slider_ct = $E("gitem_"+eid);
	daddClass(slider_ct, "item-current");
	return false;
}
function image_over(obj){
	daddClass(obj, "item-over");
}
function image_out(obj){
	dremoveClass(obj, "item-over");
}
function image_current(){
	var eid = parseInt(document.location.hash.substring(1));
	if( eid > 0 ){
		image_select(eid);
	}
}
function image_previous(){
	if( slider_status == 0 ) return;
	if( slider_c > 0 ){
		var eid = slider._psprevious(slider_c);
		image_select(eid);
	}
}
function image_next(){
	if( slider_status == 0 ) return;
	if( slider_c > 0 ){
		var eid = slider._psnext(slider_c);
		image_select(eid);
	}
}
function img_previous(){
	if( slider_status == 0 ) return;
	if( slider_c > 0 ){
		var eid = slider._psprevious(slider_c,4);
		image_select(eid);
	}
}
function img_next(){
	if( slider_status == 0 ) return;
	if( slider_c > 0 ){
		var eid = slider._psnext(slider_c,4);
		image_select(eid);
	}
}
function img_ds(){
	window.setInterval(function(){
			if($E("gimg_auto").value == 1){
				image_next();
			}
			}, 3000);
}
//
addLoadEvent(function(){
	//
	slider = new slider_image("glist", "gimage");
	slider.init();
	//
	slider_status = 1;
	//
	image_current();
	img_ds();
});
</script>
{/literal}
